<template>
    <div class="recentlyplay">
        <div class="header space-between padding-24 bg-active">
            <div class="h-back" @click="goBack"><img :src="back" alt=""></div>
            <div class="fs-32 color-f" :class="{active:cur==1}" @click="select(1)">歌曲&nbsp;<span class="color-f fs-28">2</span></div>
            <div class="fs-32 color-f" :class="{active:cur==2}" @click="select(2)">歌手&nbsp;<span class="color-f fs-28">80</span></div>
            <div class="fs-32 color-f" :class="{active:cur==3}" @click="select(3)">专辑&nbsp;<span class="color-f fs-28">80</span></div>
            <div class="fs-32 color-f" :class="{active:cur==4}" @click="select(4)">视频&nbsp;<span class="color-f fs-28">80</span></div>
            <div class="h-right"><img :src="play" alt=""></div> 
        </div>
        <div class="content">
            <div class="music bg-f padding-24" v-if="cur==1">
                <div class="" v-if="musiclist.length>0">
                    <div class="top space-between">
                        <div class="left center-col">
                            <img :src="playall" alt="">
                            <p class="fs-36">全部播放</p>
                        </div>
                        <div class="right center-col">
                            <img :src="operate" alt="">
                            <p>批量操作</p>
                        </div>
                    </div>
                    <div class="music-list">
                        <div class="list-item space-between" v-for="(item,index) in musiclist" :key="index">
                            <div class="left">
                                <p class="fs-36 overFlow">{{item.music_name}}</p>
                                <p class="fs-26 color-9 overFlow">{{item.singer_name}}-{{item.music_list_name}}</p>
                            </div>
                            <div class="right">
                                <img :src="more" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="center" v-else>最近没有播放歌曲哦~</div>
            </div>
            <div class="singer bg-f " v-if="cur==2">
                <div class="singer-list" v-if="singerlist.length>0">
                    <div class="list-item bg-f padding-24 space-between" v-for="(item,index) in singerlist" :key="index">
                        <div class="left">
                            <img :src="item.cove" alt="" class="cove">
                        </div>
                        <div class="right flex-column">
                            <div class="space-between">
                                <p class="fs-32">{{item.name}}</p>
                                <!-- <img :src="more" alt="" @click="domore(item)"> -->
                            </div>
                            <p class="fs-24 color-6 overFlow">{{item.text}}</p>
                        </div>
                    </div>
                </div>
                <div class="center" v-else>最近没有播放歌曲哦~</div>
            </div>
            <div class="musicList bg-f" v-if="cur==3">
                <div v-if="singerlist.length>0">
                    <div class="list-item bg-f padding-24 space-between" v-for="item in singerlist" >
                        <img :src="item.cove" alt="">
                        <div class="right flex-column">
                            <p class="fs-32 ">{{item.text}}</p>
                            <p class="fs-22 color-9">{{item.name}}，{{item.music_number}}首</p>
                        </div>
                    </div>
                </div>
                <div class="center" v-else>最近没有播放专辑歌曲哦~</div>
            </div>
            <div class="video bg-f" v-if="cur==4">
                <div class="video-list padding-24 space-between wrap bg-f" v-if="video.length>0">
                    <div class="list-item" v-for="item in video">
                        <div class="top">
                            <div class="img-show">
                                <img :src="item.cove" alt="">
                                <div class="play yuan center">
                                    <p class="play-btn"></p>
                                </div>
                            </div>
                        </div>
                        <div class="video-name overFlow-2">
                            {{item.name}}
                        </div>
                    </div>
                </div>
                <div class="center" v-else>最近没有播放视频哦~</div>
            </div>
        </div>
        <div class="empty center" v-if="qk">
            <div class="btn">
                <img :src="del" alt="">
                <p class="fs-24 color-6">清空播放记录</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            cur:1,
            qk:true,
            playall:require("../../assets/index/playAll.png"),
            operate:require("../../assets/index/operate.png"),
            more:require("../../assets/index/more.png"),
            back:require('../../assets/index/back.png'),
            play:require('../../assets/index/play.png'),
            del:require("../../assets/index/delete.png"),
            musiclist:[],
            singerlist:[
                {
                    cove:require("../../assets/image/cove.png"),
                    news:true,
                    ismusicer:true,
                    isvip:true,
                    name:'磨人的小妖精1',
                    text:'这是一个磨人的小妖精，真的很磨人',
                    music_number:1,
                },
            ],
            video:[
                {
                    cove:require('../../assets/image/cove.png'),
                    name:'2019周洁琼霍尊《醉赤壁+日不落》-2019周年某某额鹅鹅鹅'
                },
                {
                    cove:require('../../assets/image/cove.png'),
                    name:'2019周洁琼霍尊《醉赤壁+日不落》-2019周年某某额鹅鹅鹅'
                },
                {
                    cove:require('../../assets/image/cove.png'),
                    name:'2019周洁琼霍尊《醉赤壁+日不落》-2019周年某某额鹅鹅鹅'
                }
            ]
        }
    },
    created(){
        this.getrecentlyPlayedMusic()
    },
    methods:{
        getrecentlyPlayedMusic(){
            let url = this.$host1 + `home/dynamic/recentlyPlayedMusic`
            this.$axios.get(url).then(res => {
                console.log(res)
                //return
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.musiclist=resData.data
                    this.select(1)
                }else{
                    this.musiclist=[]
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.musiclist=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        goBack(){
            this.$router.go(-1);
        },
        select(i){
            if(i==1){
                if(!this.musiclist[0]){
                    this.qk=false
                }else{
                    this.qk=true
                }
            }else if(i==2){
                if(!this.singerlist[0]){
                    this.qk=false
                }else{
                    this.qk=true
                }
            }else if(i==3){
                if(!this.singerlist[0]){
                    this.qk=false
                }else{
                    this.qk=true
                }
            }else if(i==4){
                if(!this.video[0]){
                    this.qk=false
                }else{
                    this.qk=true
                }
            }
            this.cur=i
        }
    }
}
</script>
<style lang="scss">
.recentlyplay{
    .header{
        width: 100%;
        height: 1rem;
        .h-back{
            width: 0.15rem;
            height: 0.26rem;
            img{
                width: 100%;
            }
        }
        .title{
            font-size: 0.36rem;
            font-weight: bold;
        }
        .active{
            font-size: 0.36rem;
            font-weight: bold
        }
        .h-right{
            width: 0.38rem;
            height: 0.5rem;
            img{
                display: inline-block;
                width: 100%;
            }
        }
    }
    .content{
        margin-top: 1rem;
        width: 100%;
        height: auto;
        .music{
            .top{
                height: 1rem;
                .left{
                    img{
                        width: 0.38rem;
                        height: 0.38rem;
                        margin-right: 0.2rem;
                    }
                }
                .right{
                    img{
                        width: 0.3rem;
                        height: 0.3rem;
                        margin-right: 0.2rem;
                    }
                }
            }
            .music-list{
                .list-item{
                    width: 100%;
                    height: 1.6rem;
                    border-bottom: 0.01rem solid #e9e9e9;
                    .left{
                        width: 6rem;
                        height: 100%;
                        //background-color: greenyellow;
                        .fs-36{
                            margin-top: 0.3rem;
                        }
                        .fs-26{
                            margin-top: 0.15rem;
                        }
                    }
                    .right{
                        img{
                            width: 0.08rem;
                            height: 0.36rem;
                        }
                    }
                }
            }
            
        }
        .singer{
            .list-item{
                height: 1.4rem;
                border-bottom: 0.01rem solid #e9e9e9;
                .left{
                    width: 0.9rem;
                    height: 0.9rem;
                    position: relative;
                    .cove{
                        width: 0.9rem;
                        height: 0.9rem;
                        border-radius: 50%;
                        object-fit: cover;
                    }
                    .point{
                        width: 0.16rem;
                        height: 0.16rem;
                        position: absolute;
                        border-radius: 50%;
                        right: 0;
                        top: 0;
                    }
                    .loge{
                        width: 0.32rem;
                        height: 0.32rem;
                        position: absolute;
                        border-radius: 50%;
                        bottom: 0;
                        right: 0;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .right{
                    width: calc(100% - 1.1rem);
                    height: 0.9rem;
                    img{
                        width: 0.08rem;
                        height: 0.32rem;
                    }
                }
            }
        }
        .musicList{
            .list-item{
                height: 1.8rem;
                width: 100%;
                border-bottom: 0.01rem solid #e9e9e9;
                img{
                    width: 1.5rem;
                    height: 1.5rem;
                    border-radius: 0.22rem;
                    object-fit: cover;
                }
                .right{
                    height: 1.2rem;
                    width: calc(100% - 1.8rem);
                    //background-color: greenyellow;
                    .fs-32{
                        line-height: 0.4rem;
                        max-height: 0.8rem;
                        overflow: hidden;
                    }
                }
            }
        }
        .video{
            .video-list{
                padding-top: 0.2rem;
                .list-item{
                    //background-color: greenyellow;
                    height: 3rem;
                    width: 3.41rem;
                    margin-bottom: 0.2rem;
                    .top{
                        width: 100%;
                        height: 1.96rem;
                        border-radius: 0.16rem;
                        overflow: hidden;
                        .img-show{
                            width: 100%;
                            height: 100%;
                            position: relative;
                            img{
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                            .play{
                            width: 0.8rem;
                            height: 0.8rem;
                            border: 0.01rem solid rgba(255, 255, 255, 0.8);
                            background-color: rgba(0, 0, 0, 0.5);
                            position: absolute;
                            top: 50%;
                            margin-top: -0.4rem;
                            left: 50%;
                            margin-left: -0.4rem;
                            //border-radius: 0.05rem;
                            .play-btn{
                            width: 0;
                            height: 0;
                            margin-left: 0.4rem;
                            width: 0px;
                            height: 0px;
                            border-left: 0.3rem solid transparent;
                            border-top: 0.2rem solid transparent;
                            border-right: 0.3rem solid #fff;
                            border-bottom: 0.2rem solid transparent;
                            opacity: 0.7;
                            transform: rotate(180deg);
                            }
                        }
                        }
                    }
                    .video-name{
                        //background-color: red;
                        line-height: 0.4rem;
                        height: 0.8rem;
                        overflow: hidden;
                        margin-top: 0.2rem;
                    }
                }
            }
        }
        .center{
            width: 100%;
            height: 100vh;
        }
    }
    .empty{
        height: 1.2rem;
        padding-top: 0.001rem;
        .btn{
            width: auto;
            height: 100%;
            //background-color: greenyellow;
            img{
                width: 0.42rem;
                height: 0.5rem;
                margin: 0.1rem auto 0 ;
            }
            p{
                text-align: center;
                margin-top: 0.1rem;
            }
        }
    }
}
</style>